<template>
  <div class="User">
    <el-dropdown class="User-DropDown" @command="handleCommand">
      <span class="User__dropdown">操作
        <i class="el-icon-caret-top"></i>
        <i class="el-icon-caret-bottom"></i>
      </span>
      <el-dropdown-menu class="User-DropDown-menu" slot="dropdown">
        <el-dropdown-item command="dialogShow">编辑用户</el-dropdown-item>
        <el-dropdown-item command="delUser">删除</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <el-dialog title="编辑用户" :visible.sync="visabled" width="440px" top="137px" center>
      <el-form :model="editUserForm" ref="editUserForm" class="demo-ruleForm" label-position="left">
        <el-form-item label="手机号码">
          <el-input type="text" readonly :value="editUserForm.mobilePhone"></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="name" :rules="[
            { required: true, message: '请输入昵称'},
          ]">
          <el-input type="text" v-model="editUserForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email" :rules="[
            { required: true, message: '请输入邮箱'},
            { pattern:/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/, message: '邮箱格式输入有误' }
          ]">
          <el-input type="text" v-model="editUserForm.email" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item class="belong_role" label="所属用户组" prop="roleIds" :rules="[
            { type: 'array', required: true, message: '请至少选择一个所属用户组', trigger: 'change' }
          ]">
          <el-checkbox-group v-model="editUserForm.roleIds">
            <el-checkbox v-for="item in roleList" :key="item.id" :label="item.id" name="roleIds" border size="mini">{{item.text}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm" size="medium">取 消</el-button>
        <el-button type="primary" @click="submitForm" size="medium">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  updateWebUser,
  getWebUser,
  deleteWebUser
} from '~/api/'
export default {
  props: {
    userId: {
      require: true
    },
    roleList: {
      require: true
    }
  },
  data() {
    return {
      visabled: false,
      editUserForm: {
        mobilePhone: '',
        name: '',
        email: '',
        roleIds: []
      }
    }
  },
  methods: {
    handleCommand(command) {
      this[command]()
    },
    async dialogShow() {
      const res = await getWebUser(this, this.userId)
      if (res.code != '0') return this.$alert(res.msg, '提示', {
        type: 'error'
      })
      // 初始化表单数据
      this.editUserForm['mobilePhone'] = res.data.userInfo.mobilePhone
      this.editUserForm['name'] = res.data.userInfo.name
      this.editUserForm['email'] = res.data.userInfo.email
      this.editUserForm['roleIds'] = res.data.userInfo.roleIds
      this.visabled = true
      console.log(`编辑用户ID：${this.userId}`)
    },
    getRoleNameStr(data) {
      let arr = []
      this.roleList.map(item => {
        if (this.editUserForm.roleIds.indexOf(item.id) != -1) {
          arr.push(item.text)
        }
      })
      return arr.toString()
    },
    submitForm() {
      this.$refs['editUserForm'].validate(async (valid) => {
        if (!valid) return
        let res = await updateWebUser(this, this.userId, this.editUserForm.email, this.editUserForm.name, this.editUserForm.roleIds)
        if (res.code === '0') {
          this.$message.success('修改成功')
          //更新用户成功回调
          this.$emit('on-update-success', {
            mobilePhone: this.editUserForm['mobilePhone'],
            name: this.editUserForm['name'],
            email: this.editUserForm['email'],
            id: this.userId,
            roleNameStr: this.getRoleNameStr()
          })
          this.visabled = false
        } else {
          this.$message.error(res.message)
        }
      })
    },
    async delUser() {
      let res = await deleteWebUser(this, this.userId)
      if (res.code === '0') {
        this.$message.success('删除成功')
        this.$emit('on-delete-success')
      } else {
        this.$message.error(res.message)
      }
    },
    resetForm() {
      this.$refs['editUserForm'].resetFields()
      this.visabled = false
    }
  },
}
</script>

<style lang="scss" scoped>
.User-DropDown {
  min-width: 100px;
  height: 40px;
}

.User-DropDown-menu {
  min-width: 100px;
}

.User {
  &__dropdown {
    font-size: 16px;
    color:#000;
    display: inline-block;
    width: 100%;
    cursor: pointer;
    .el-icon-caret-bottom {
      display: none;
    }
    &:hover {
      color: #409eff;
      .el-icon-caret-top {
        display: none;
      }
      .el-icon-caret-bottom {
        display: inline-block;
      }
    }
  }
  & /deep/ {
    .el-dialog {
      border-radius: 20px;
    }
    .el-dialog__header {
      text-align: left;
      border-bottom: 1px solid #eee;
      span {
        color: #0070ff;
        font-size:18px;
      }
    }
    .el-dialog__body{
      padding-right:80px;
    }
    .el-form-item__label,.el-button--medium{
      font-size: 16px;
    }
    .el-input{
      width:50%;
      margin-left:50px;
      float: right
    }
    .el-input__inner {
      border-radius: 40px;
    }
    .el-checkbox__input {
      display: none;
    }
  }
  .belong_role {
    & /deep/ {
      .el-form-item__label {
        width: 100%;
      }
      .el-form-item__content {
        margin-left: 0;
      }
      label {
        margin-left: 0;
        margin-right: 10px;
      }
    }
  }
}
</style>
